<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="bth1">连接服务端</button>
    <button id="bth2" disabled='true'>发送数据给服务端</button> <br>
    接收数据： <br>
    <span id="sp"></span>
    <script>
        var btn1 = document.querySelector('#bth1')
        var btn2 = document.querySelector('#bth2')
        var span = document.querySelector('#sp')
        let ws = null 
        bth1.addEventListener('click',function() {
            // 连接服务端
            ws = new WebSocket('ws://localhost:9998')
            ws.onopen = () =>{
                console.log('连接成功');
                btn2.disabled = false
            }
            ws.onmessage = msg =>{
                console.log('数据是：'+ msg);
                span.innerHTML = msg.data
            }            
            ws.onclose = () =>{
                console.log('连接失败');
                btn2.disabled = true
            }
        })
        bth2.addEventListener('click',function() {
            ws.send(JSON.stringify({
                action:'fullScreen',
                socketType:'fullScreen',
                chartName:'trend',
                value:'true'
            }))
        })

    </script>
</body>

</html>